<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
请输入城市 ： <input type="text" id="city" onblur="cc()"><span id="zcity"></span>
<div id="hchart" style="width: 450px;height: 380px"></div>
</body>
</html>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://img.hcharts.cn/highcharts/highcharts.js"></script>
<script src="https://img.hcharts.cn/highcharts/highcharts-more.js"></script>
<script>
    function cc(){
        var city = document.getElementById('city').value;
        var zcity = document.getElementById('zcity');
        var res=/^[A-Za-z0-9\u4e00-\u9fa5]+$/;
        if(!res.test(city) || city.length>=30)
        {
            zcity.innerHTML ="<font color='red'>不正确</font>";
        }else{
            zcity.innerHTML ="<font color='green'>√</font>";
        }
    }
    $("#city").blur(function(){
        var city = $(this).val();
        $.ajax({
            url:"index.php",
            data:{city:city},
            type:"post",
            dataType:"json",
            success:function(res){
               var week = "";
               var temp = "[";
               $.each(res,function(i,v){
                   week += v.week+",";
                   temp +="["+v.temp_low+","+v.temp_high+"],";
               });
               week =week.split(",");
               temp +="]";
                var chart = Highcharts.chart('hchart', {
                    chart: {
                        type: 'columnrange', // columnrange 依赖 highcharts-more.js
                        inverted: true
                    },
                    title: {
                        text: '一周温度变化'
                    },
                    subtitle: {
                        text: '2009 挪威某地'
                    },
                    xAxis: {
                        categories: week
                    },
                    yAxis: {
                        title: {
                            text: '温度 ( °C )'
                        }
                    },
                    tooltip: {
                        valueSuffix: '°C'
                    },


                    series: [{
                        name: '温度',
                        data: eval(temp)
                    }]
                });
            }
        });
    });
</script>
